<template>
	<view class="content">
		<view v-if="type != 1" class="travel" v-for="(item, index) in pathAttractionList" :key="index"
			@click="goDetails(item.id)">
			<view class="title">
				<text></text>
				<text>{{item.name}}</text>
			</view>
			<u-scroll-list :indicator="false">
				<view class="u-scroll" v-for="(i, d) in item.pathAttractionList" :key="d">
					<image class="scroll-boxImage"
						:src="i.attractionImages? $u.fileBaseUrl + i.attractionImages.split(',')[0] :'../../../static/images/index/zwtp.png' ">
					</image>
					<view class="scroll-title">
						{{i.attractionName}}
					</view>
					<view class="scroll-bottom">
					</view>
				</view>
			</u-scroll-list>
		</view>

		<view class="box" v-if="type ==1 ">
			<view class="box-title">
				定制出行玩法介绍
			</view>
			<view class="box-content">
				<view>
					1.专业旅行规划师一对一免费定制出游路线，吃住行拍一站式规划，出游灵活随心，放松享受旅行时光
				</view>
				<view>
					2. 灵活随心，自主掌控
					根据管家精心规划，自由选择理想游玩天数。
					长途短驾，随心所欲，打造专属于您的完美假期。
				</view>
				<view>
					3. 定制专属，一站式服务
					- 专业摄影师捕捉精彩瞬间
					- 熟练司机保障安全出行
					- 多样车型满足不同需求
					- 个性化拍摄方案展现独特魅力
					- 舒适住宿享受惬意时光
					- 景点门票一键预订，畅通无阻
				</view>
				<view>
					从出行到住宿，从拍摄到游览，我们为您打造全方位无忧之旅。
					让每一个选择都成为难忘回忆的璀璨一笔。
				</view>
			</view>
		</view>

		<view class="customizedRoute">
			<button class="customizedRoute-button" @click="gocustomized">定制路线</button>
		</view>

		<u-popup :show="showpopup" @close="close" mode="top" @open="open" round="20">
			<view class="u-popup">
				<view class="title">
					保存二维码微信扫一扫快速定制出行路线
				</view>
				<image
					:src=" area.customerImage? $u.fileBaseUrl +  area.customerImage :'/static/images/index/zwtp.png' "
					mode="widthFix"></image>
				<view class="button">
					<button @click="showpopup=false">取消</button>
					<button @click="getdownload">保存</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pathAttractionList: [],
				selectedImageIndex: 0,
				page: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				type: 0,
				showpopup: false,
				area: {}
			}
		},
		onLoad(option) {
			this.type = option.type
			this.getListPathAttraction()

		},
		onShow() {
			this.getListPathAttraction()
		},
		onHide() {
			this.page.pageNum = 1
			this.page.pageSize = 10
		},
		onUnload() {
			this.page.pageNum = 1
			this.page.pageSize = 10
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 刷新数据的逻辑
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getListPathAttraction()
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		// onReachBottom() {
		// 	this.loadMore();
		// },
		methods: {
			// 定制路线
			gocustomized() {
				// uni.navigateTo({
				// 	url: '/packagesIndex/pages/customized/customized'
				// })
				this.showpopup = true
				this.getarea()
			},
			async getarea() {
				const id = uni.getStorageSync('id')
				let res = await this.$u.api.getarea({
					id: id
				})
				if (res.code == 200) {
					this.area = res.data
				}
			},
			// 下载
			getdownload() {
				let that = this
				if (that.area.customerImage) {
					wx.getImageInfo({
						src: that.area.customerImage,
						success(res) {
							uni.saveImageToPhotosAlbum({
								filePath: res.path,
								success() {
									that.$u.toast('下载成功');
								}
							});
						}
					})
				} else {
					that.$u.toast('暂无可保存的二维码哦～')
				}

			},
			// 获取路线推荐详情列表
			async getListPathAttraction() {
				let res = await this.$u.api.getListPathAttraction(this.page)
				if (res.code == 200) {
					// if (this.page.pageNum == 1) {
					this.pathAttractionList = res.rows;
					// } else {
					// 	// 如果不是第一页，追加数据
					// 	this.pathAttractionList = [...this.pathAttractionList, ...res.rows];
					// }
					this.total = res.total;
				}
			},
			// 跳转详情
			goDetails(id) {
				uni.navigateTo({
					url: `/packagesIndex/pages/AttractionDetail/AttractionDetail?id=${id}`
				})
			},
			// 上拉加载
			loadMore() {
				if (this.pathAttractionList.length >= this.total) {
					uni.showToast({
						title: '没有更多景点了',
						icon: "none"
					});
					return;
				}

				this.page.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});

				this.getListPathAttraction().then(() => {
					uni.hideLoading();
				}).catch(error => {
					console.error('加载更多数据时出错:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
			open() {},
			close() {
				this.showpopup = false
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getListPathAttraction()
			this.type = options.type
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 91vh;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		.travel.active {
			background: #F3F8FF;
			border: 2rpx solid #f55c21;
		}

		.title {
			display: flex;
			align-items: center;
			margin: 20rpx 0;

			text {
				font-weight: 600;
				font-size: 32rpx;

				&:nth-child(1) {
					width: 10rpx;
					height: 30rpx;
					display: block;
					background-color: $overall-color;
					margin-right: 15rpx;
				}
			}
		}

		.u-scroll {
			.scroll-boxImage {
				width: 318rpx;
				height: 206rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.scroll-title {
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				margin: 10rpx 0;
			}

			.scroll-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx;

				.scroll-bottom-left {
					display: flex;
					align-items: center;

					.scroll-bottom-image {
						width: 30rpx;
						height: 30rpx;
					}

					.scroll-bottom-name {
						font-weight: 400;
						font-size: 24rpx;
					}
				}

				.scroll-bottom-right {
					display: flex;
					align-items: center;

					.scroll-bottom-right-browse {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

			}
		}

		.box {
			text-align: justified;

			.box-title {
				text-align: center;
				margin-bottom: 40rpx;
				font-size: 24rpx;
			}

			.box-content {
				padding: 0 60rpx;

				view {
					font-size: 24rpx;
					line-height: 40rpx;
					margin: 0 0 40rpx;
				}
			}
		}

		.customizedRoute {
			box-sizing: border-box;
			width: 750rpx;
			padding: 30rpx 55rpx calc(env(safe-area-inset-bottom) + 10rpx);
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			display: flex;
			justify-content: center;

			.customizedRoute-button {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
				color: #fff;
				background-color: $overall-color;
				text-align: center;
				border-radius: 40rpx;
			}
		}

		.u-popup {
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 180rpx;
				margin-bottom: 50rpx;
			}

			.title {
				font-size: 28rpx;
				margin: 30rpx auto;
				color: #333;
			}

			.button {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 24rpx;

				button {
					width: 230rpx;
					height: 66rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 33rpx;
					font-size: 30rpx;
					margin-bottom: 30rpx;

					&:nth-child(1) {
						background-color: $overall-color;
						color: #fff;
					}

					&:nth-child(2) {
						background-color: #fff;
						color: $overall-color;
						border: 2rpx solid $overall-color;
					}
				}
			}
		}
	}
</style>